<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}首页{% endblock %}-图书商城</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.css') }}">
    <link rel="icon" href="{{ url_for('static',filename='image/icon.png') }}">
    <script src="{{ url_for('static',filename='javaScript/jquery-3.2.1.js') }}"></script>
    <script src="{{ url_for('static',filename='javaScript/bootstrap.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/base.css') }}">
    <script src="{{ url_for('static',filename='javaScript/base.js') }}"></script>
    <script src="{{ url_for('static',filename='javaScript/admin_base.js') }}"></script>
    <script src="{{ url_for('static',filename='javaScript/admin_view.js') }}"></script>
    {% block head %}
    {% endblock %}
    {% from 'bootstrap/form.html' import render_form %}
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<nav class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{ url_for('index') }}">图书商城</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="base-active nav-active"><a href="{{ url_for('index') }}"><span
                        class="glyphicon glyphicon-home"
                        aria-hidden="true"></span>首页 </a></li>
                {#   <li class="base-active nav-active"><a href="{{ url_for('admin_view') }}">管理员</a></li>#}
            </ul>
            <form class="navbar-form navbar-left" action="{{ url_for('books_query') }}">
                <div class="form-group">
                    <input name="search_str" type="text" class="form-control" placeholder="请输入关键字">
                </div>
                <button type="submit" class="btn btn-default">查找</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                {% if user %}
                    <li class="base-active nav-active"><a
                            href="{{ url_for('personal_information') }}">{{ user.username }}</a></li>
                    <li class="base-active nav-active"><a href="{{ url_for('query_cart') }}">
                        <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                        <span class="badge pull-right">{{ user.cart.cart_items|length }}</span>购物车</a></li>
                    <li class="base-active nav-active"><a href="{{ url_for('orders_view') }}">
                        <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                        订单</a></li>
                    <li class="base-active nav-active"><a href="{{ url_for('logout') }}">注销</a></li>
                {% else %}
                    <li class="base-active nav-active"><a href="{{ url_for('login') }}">登录</a></li>
                    <li class="base-active nav-active"><a href="{{ url_for('register') }}">注册</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

{% block fixed_div %}
    <div class="base-page-fixed show_modal">
        <div class="list-group transparent">
            <a href="{{ url_for('rank_book', rank_type='new') }}" class="list-group-item list-group-item-success">新书上架</a>
            {% for book in new_books[:5] %}
                <a href="javascript:void(0);" class="list-group-item" data-toggle="modal"
                   data-target="#modal-comment-book"
                   data-url="{{ url_for('book_detail_customer',book_id=book.id) }}">{{ book.name }}</a>
            {% endfor %}
        </div>
        <div class="list-group transparent">
            <a href="{{ url_for('rank_book', rank_type='sales') }}" class="list-group-item list-group-item-success">畅销排行</a>
            {% for book in sales_books[:5] %}
                <a href="javascript:void(0);" class="list-group-item" data-toggle="modal"
                   data-target="#modal-comment-book"
                   data-url="{{ url_for('book_detail_customer',book_id=book.id) }}">{{ book.name }}</a>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{# 滚动荧幕 #}
{% block carousel %}
    {% if carousels %}
    <div class="container" style="background: url('{{ url_for('static',filename='image/carousel-background.jpg') }}') no-repeat ;background-size:cover;padding: 0;">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                {% for carousel in carousels %}
                    <li data-target="#carousel-example-generic" data-slide-to="{{ loop.index }}"
                        {% if loop.first %}class="active"{% endif %}></li>
                {% endfor %}
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner center-block" role="listbox" style="height: 300px;width: 60%">
                {% for img in carousels %}
                    <div class="item {% if loop.first %}active{% endif %}" align="center" style="height: 100%">
                        <img src="{{ img.url }}" style="height: 100%" alt="">
                    </div>
                {% endfor %}
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    {% endif %}
{% endblock %}
<div class="container base-center main-div" style="margin-top: 15px">
    <div class="container left pull-left">
        <ul class="nav nav-pills nav-stacked">
            {% for classify in book_classifies %}
                <li role="presentation" class="base-active active"><a
                        href="{{ url_for('books_view_classify', book_classify_id=classify.id) }}">{{ classify.name }}</a>
                </li>
            {% endfor %}
            {% block left %}
            {% endblock %}
        </ul>
    </div>
    <div class="container main pull-left">
        {% block main %}{% endblock %}
    </div>
</div>
<div id="div_modal">
    {% block book_madol %}
        {#    模态框 #}
        <div class="modal fade modal-book-detail" tabindex="-1" role="dialog" id="modal-comment-book"
             aria-labelledby="exampleModalLabel">
        </div>
    {% endblock %}
</div>
{% if g.scroll_pos %}
    <script type="text/javascript">
        $(function () {
            document.documentElement.scrollTop = parseInt({{ g.scroll_pos }});
            document.body.scrollTop = parseInt({{ g.scroll_pos }});
        });
    </script>
{% endif %}
{% if get_flashed_messages() %}
    <script type="text/javascript">
        $(function () {
            document.documentElement.scrollTop = parseInt({{ g.scroll_pos }});
            document.body.scrollTop = parseInt({{ g.scroll_pos }});
            setTimeout("alert('{{ get_flashed_messages()|first }}')", 100);
        })
    </script>
{% endif %}
</body>
</html>